<template>
  <div class="complaintList-page">
    <van-nav-bar :title="title" left-arrow @click-left="$router.go(-1)" />
    <ul v-if="list.length > 0">
      <li class="complaintList-page-item" v-for="(item, index) in list" :key="index" @click="switchToJobDetail(item)">
        <p>
          <span class="complaintList-page-prop">{{ title }}内容：</span>
          <span>{{ item.text }}</span>
        </p>
        <div v-if="item.image" class="complaintList-page-image">
          <span class="complaintList-page-prop">{{ title }}图片：</span>
          <ul class="complaintList-page-image--list">
            <li class="complaintList-page-image--item" v-for="(imgSrc, index) in item.image.split('|')" :key="index">
              <img :src="imgSrc" @click.stop="imagePreview(imgSrc)" alt="投诉图片" />
            </li>
          </ul>
        </div>
        <p>
          <span class="complaintList-page-prop">举报招聘信息：</span>
          <span>{{ item.enterprise_name | empty }}</span>
        </p>

        <p v-if="item.rebut_msg">
          <span class="complaintList-page-prop">驳回理由：</span>
          <span>{{ item.rebut_msg | empty }}</span>
        </p>
        <p v-else-if="item.warningmsg">
          <span class="complaintList-page-prop">警告理由：</span>
          <span>{{ item.warningmsg | empty }}</span>
        </p>
        <p v-else-if="item.limit_remark">
          <span class="complaintList-page-prop">限制理由：</span>
          <span>{{ item.limit_remark | empty }}</span>
        </p>
        <p v-if="item.rebut_msg || item.warningmsg || item.limit_remark">
          <span class="complaintList-page-prop">处理结果：</span>
          <span>{{ item.rebut_msg ? '驳回' : item.warningmsg ? '警告' : item.jieguo.trim() || '限制' }}</span>
        </p>
        <p>
          <span class="complaintList-page-prop">举报时间：</span>
          <span>{{ item.createdate | empty }}</span>
        </p>
        <p v-if="item.rebut_msg || item.warningmsg || item.limit_remark">
          <span class="complaintList-page-prop">处理时间：</span>
          <span>{{ item.audit_time | empty }}</span>
        </p>
      </li>
    </ul>
    <van-empty v-else :description="`暂时没有收到${title}`" />
  </div>
</template>
<script>
import {ImagePreview} from 'vant'
export default {
  name: 'complaintList',
  data() {
    return {
      list: []
    }
  },
  filters: {
    empty: function(value) {
      return value ? value : '--'
    }
  },
  computed: {
    title() {
      return this.$route.query.title || '举报'
    },
    user_id() {
      return this.$route.query.user_id
    },
    from() {
      return this.$route.query.from || ''
    },
    company_id() {
      return this.$route.query.company_id || ''
    },
    job_id() {
      return this.$route.query.job_id || ''
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      const {title, user_id, from} = this
      const getList = (() => {
        if (from === 'user') {
          return title.includes('投诉建议') ? this.$api.user.getMySuggest : this.$api.user.getMyReport
        } else {
          return title.includes('投诉建议') ? this.$api.job.getSuggestList : this.$api.company.getReportList
        }
      })()
      const params = {
        pageindex: 1,
        pagesize: 100,
        user_id
      }

      getList(params)
        .then(res => {
          if (res.code === 200) {
            this.list = res.data.items
            console.log('getReportList', res.data)
          } else {
            this.$toast(res.info || '接口错误')
          }
        })
        .catch(err => {
          // this.$toast(err || '系统错误')
        })
    },
    formmatDate(timeStamp) {
      return new Date(timeStamp + 8 * 3600 * 1000)
        .toISOString()
        .replace('T', ' ')
        .slice(0, -5)
    },
    switchToJobDetail(item) {
      item.job_id &&
        this.$router.push({
          path: `/jobDetail`,
          query: {
            id: item.job_id,
            com_type:1,
            ...this.$route.query
          }
        })
    },
    imagePreview(imgSrc) {
      ImagePreview({
        images: [imgSrc],
        closeable: true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.complaintList-page {
  &-item {
    background: white;
    padding: 10px 20px;
    & + li {
      margin-top: 20px;
    }
  }
  &-prop {
    min-width: 60px;
    font-weight: bold;
  }
  &-image {
    display: flex;
    align-items: flex-start;
    &--list {
      flex: 1;
      flex-wrap: wrap;
      display: flex;
      li {
        flex: 0 0 33%;
        margin-bottom: 4px;
      }
      img {
        max-width: 100%;
        display: block;
        border: 2px solid #fff;
      }
    }
  }
  &-empty {
    text-align: center;
    margin-top: 60%;
    font-size: 28px;
    font-weight: bold;
    color: #666;
  }
}
</style>
